import { Input } from "antd";
import { useEffect } from "react";
import { useDrag } from "react-dnd"

interface MyComponentProps{
id:string
containerId:string
}
const ItemTypes = {
    INPUI: 'input',
    ITEM: 'item'
  };
const DraggableView: React.FC<MyComponentProps> = (props) => {

    const [{ isDragging }, drage] = useDrag(() => ({
        type: ItemTypes.INPUI,
        item: { 
            id:props.id,
            sourceContainer: props.containerId,
            type:ItemTypes.INPUI,
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        })
    }))

    if (isDragging) {
        return <div ref={drage}></div>
    }
    return (

        <div ref={drage}
            className={'w-auto h-auto inline-block  rounded '}>
                {props.containerId=="LeftDropable"&&<div>输入框</div>}
                {props.containerId!=="LeftDropable"&&<Input defaultValue={props.id}></Input>}
                
        </div>
    )

}
export default DraggableView;